<template>
	<view class="flex-col page">
		<view class="add">
			<view class="tab">
				<view :class="tab==0?'active':''" @click="changeTab(0)">项目升级</view>
				<view :class="tab==1?'active':''" @click="changeTab(1)">项目加钟</view>
			</view>
			<view class="upgrade" v-if="tab==0">
				<view class="h2">将<text class="sname">{{service.service_name}}</text>升级为以下项目：</view>
				<view class="view" v-for="(item,index) in addlist">
					<view class="item">
						<image class="img" :src="item.cover"></image>
						<view class="right-view">
							<view>{{item.service_name}}</view>
							<view>
							<text class="timeico"></text>
							{{item.duration}}分钟
							</view>
							<view>￥<text class="price">{{item.price}}</text>元</view>
						</view>
						<view class="buyinfo">
							<view class="price">需补差价 <text>￥{{item.price - service.price}}</text></view>
							<view class="btn" @click="showPay(item)">立即升级</view>
						</view>
					</view>
				</view>
			</view>
			<view class="addclock" v-if="tab==1">
				<view class="h2">将<text class="sname">{{service.service_name}}</text>加钟为以下项目：</view>
				<view class="view" v-for="(item,index) in addlist">
					<view class="item">
						<image class="img" :src="item.cover"></image>
						<view class="right-view">
							<view>{{item.service_name}}</view>
							<view>
							<text class="timeico"></text>
							{{item.duration}}分钟
							</view>
							<view>￥<text class="price">{{item.price}}</text>元</view>
						</view>
						<view class="buyinfo">
							<view class="btn" @click="showPay(item)">立即加钟</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view>
			<u-popup :show="popShow" mode="bottom" :round="10" @close="popup_close">
				<view class="popup">
					
					<view class="payprice">
						支付:<text class="red">￥{{payamount}}元</text>
					</view>
					<view class="paytype">
						<radio-group @change="radioChange">
							<label class="item">
								<view class="title">							 
									<image src="../../static/images/b17.png" class="image_5"></image>
									余额支付(余额:￥{{ Number(user.balance) }})
								</view>
								<view class="riado">
									<radio value="1" :checked="payType==1?true:false" color="rgb(56, 152, 124)"/>
								</view>
							</label>
							<label class="item">
								<view class="title">
									<image src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844612334581390.png" class="image_5"></image>
									微信支付
								</view>
								<view class="riado">
									<radio value="4" :checked="payType==4?true:false" color="rgb(56, 152, 124)"/>
								</view>
							</label>
						</radio-group>
					</view>
					
					<view class="paybtn">
						<view class="qx" @click="popup_close">取消</view>
						<view v-if="isPay" class="ok" @tap.stop="onMultClick(toPay)">立即支付</view>
						<view v-else class="flex-col items-center text-wrapper_6" style="background-color: rgb(189, 255, 222);">
							<text>支付中……</text>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	let that;
	
	export default{
		data(){
			return {
				tab:0,
				ordid:'',
				user:{},
				service:{},
				addlist:[],
				popShow:false,
				payamount:0,
				selItem:{},
				payType: 1,
				onClick:true,
				balance: 0,
				isPay: true,
				order_form: ''
			};
		},
		onLoad(e) {
			that=this;
			this.tab=e.tab?e.tab:0;
			this.ordid=e.ordid?e.ordid:null;
			this.loadServ();
			this.changeTab(this.tab);
			this.getRecharge()
		},
		onShow() {
			const sn = uni.getStorageSync('add_recharge_sn')
			console.log('sn', sn);
			if(sn && this.order_form){
				this.count = 3
				this.checkOrderStatus(sn, this.order_form)
			}
		},
		methods:{
			async checkOrderStatus(order_sn, form){
				const res = await this.$http.post('api/wxapp/check_order_status', {order_sn, form})
				if(res.code === 1){
					// 支付成功了
					uni.removeStorageSync('recharge_sn')
					clearTimeout(this.order_time)
					// 跳转到 成功页面
					uni.redirectTo({
						url: '/bundle/pages/pay_success/pay_success'
					})
					return
				}
				this.isPay = true
				this.popShow=false;
				clearTimeout(this.order_time)
				uni.removeStorageSync('recharge_sn')
				uni.showToast({
					title: '支付失败',
					icon:'error'
				})
			},
			// 获取账户余额
			getRecharge(){
				this.$http.post('api/recharge/index').then(res => {
					this.balance = Number(res.balance)
				})
			},
			changeTab(e){
				this.tab=e;
				this.loadData(e);
				this.getUserinfo();
				// this.getWx();
			},
			loadServ(){
				this.$http.post('api/order/orderSpec', {
					order_sn:that.ordid
				}).then(res=>{
					that.service=res;
					console.log(res);
				});
			},
			loadData(id=0){
				const url=[
					'api/order/upgradeList',
					'api/order/newClockList'
				];
				this.$http.post(url[id], {
					order_sn:that.ordid
				}).then(res=>{
					that.addlist=res;
					console.log(res);
				});
			},
			getUserinfo() {
				this.$http.post('api/user/userInfo').then(res => {
					this.user = res
				})
			},
			popup_close(){
				this.popShow=false;
			},
			showPay(item){
				if(this.tab==0){
					this.payamount=item.price - this.service.price;
				}else{
					this.payamount=item.price;
				}
				this.selItem=item;
				this.popShow=true;
			},
			radioChange(e){
				const v=e.detail.value;
				this.payType=v;
			},
			toPay(){
				this.isPay = false
				const url=[
					'api/order/newUpgradeOrder',
					'api/order/newCreateClock'
				];
				this.$http.post(url[that.tab],{
					order_sn:this.ordid,
					spec_id:this.selItem.service_id
				}).then(res => {
					const order_sn=res
					const from=that.tab==0?'upgrade':'clock'
					const pay_way=that.payType;
					this.order_form = from
					that.wxPay(order_sn,from,pay_way);
				})
			},
			// 初始化H5支付
			getWx() {
				
			},
			fill(a) {
				return 10 > a ? '0' + (0 | a) : a
			},
			// 支付 功能
			wxPay(order_sn,form,pay_way) {
				
				let date = new Date();
				let create_time = date.getFullYear() + '-' + this.fill(Number(date.getMonth()) + 1) + '-' + this.fill(
						date.getDate()) + this.fill(date.getHours()) + ':' + this.fill(date.getMinutes()) + ':' + this
					.fill(date.getDate());
				
				uni.setStorageSync('order_info', {
					create_time,
					order_sn: order_sn,
					pay_type: (pay_way== 4?'微信支付':'现金支付'),
					pay_money: this.payamount
				});
				
				if (pay_way == 1 && this.payamount > Number(this.balance)) {
					uni.showToast({
						icon: 'none',
						title: '账户余额不足'
					})
					this.isPay = true
					return;
				}
				
				console.log(order_sn, form, pay_way);
				// return
				
				if(pay_way== 1){
					// 余额
					this.$http.post('api/pay/pay', { order_sn, form, pay_way})
						.then(res => {
						uni.redirectTo({
							url: '/bundle/pages/pay_success/pay_success'
						});
					})
				}else{
					// 微信 小程序
					uni.setStorageSync("add_recharge_sn", order_sn)
					console.log(order_sn, pay_way, form, '===');
					this.$http.post("api/pay/pay", { order_sn, pay_way, form })
					    .then((res) => {
							console.log('res', res);
					      plus.runtime.openURL(res.url_link);
					});
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.add{
		padding: 55px 15px 0;
		.tab{
			position: fixed;
			width: 100%;
			top: 0;
			left: 0;
			background-color: #fff;
			z-index: 9;
			display: flex;
			justify-content: space-between;
		}
		.tab view{
			height: 40px;
			line-height: 40px;
			font-size: 15px;
			transition-duration: 0.5s;
			flex: 1 1 0%;
			width: auto;
			color: rgb(48, 49, 51);
			text-align: center;
			position: relative;
		}
		.tab .active{
			font-weight: bold;
			color: rgb(56, 152, 124);
		}
		.tab .active::before{
			position: absolute;
			content: ' ';
			width: 20px;
			background-color: rgb(56, 152, 124);
			height: 3px;
			opacity: 1;
			border-radius: 3px;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		.upgrade .h2, .addclock .h2{
			line-height: 48px;
			color: #333;
			font-size: 14px;
			.sname{
				color: rgb(56, 152, 124);
			}
		}
		.upgrade,.addclock{
			.view{
				display: flex;
				align-items: center;
				background-color: #fff;
				border-radius: 14px;
				margin-bottom: 10px;
				.item{
					flex: 1;
					padding: 7px;
					display: flex;
					position: relative;
					.img{
						width: 100px;
						height: 77px;
					}
					.right-view{
						flex: 1;
						margin-left: 10px;
						display: flex;
						flex-direction: column;
						.timeico{
							background-image: url(''); width: 13px; height: 13px; background-size: 100% 100%; display: inline-block;
						}
					}
					.right-view>view:nth-child(2){
						color: #727272;
						font-size: 12px;
						flex: 1;
						display: flex;
						align-items: center;
					}
					.right-view>view:nth-child(2)>image{
						width: 13px; height: 13px;
					}
					.right-view>view:nth-child(3){
						display: flex;
						align-items: center;
						color: #ff6100;
						font-size: 12px;
						.price{
							font-size: 16px;
						}
					}
					.buyinfo{
						position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center;
						.price{
							color: #ff6100;
							font-size: 12px;
							margin-bottom: 16px;
						}
						.price>text{
							font-size: 14px;
						}
						.btn{
							width: 78px;
							height: 30px;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #fff;
							font-size: 13px;
							background-color:rgb(56, 152, 124);
							border-radius: 6px;
						}
					}
				}
			}
		}
	}
	.popup{
		padding: 12px 16px;
	}
	
	.paytype{
		margin-top: 12px;
		background-color: white;
		border-radius: 12px;
		.image_5{
			width: 17px;
			height: 17px;
		}
	}
	
	.paytype label{
		padding: 0; margin: 0 !important; display: block;
	
	}
	.paytype .item{
		display: flex; flex-direction: row; justify-content: space-between; font-size: 14px; padding: 12px 0;
	}
	.paytype .item:nth-child(1){
		border-bottom: 1px solid #f8f8f8;
	}
	.paytype .item:nth-child(2){
		padding-top: 8px;
	}
	.paytype .title{
		display: flex; align-items: center;
	}
	
	.paytype .riado{
		font-size: 13px; zoom: 0.8;
	}
	.payprice{
		.red{
			color: #f39735; font-size: 24px;
		}
	}
	.paybtn{
		display: flex; justify-content: space-between; margin-top: 16px;
		.qx{
			background-color: #ccc; color: #fff; max-width: 120px;
		}
		.ok{
			background-color: #38987c; color: #fff; margin-left: 20px;
		}
 	}
	.paybtn>view{
		height: 44px; text-align: center; flex: 1; line-height: 44px; border-radius: 22px;
	}
</style>